<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>23_模块引入-module的基本使用</title>
  <!-- 
  在HTML中，使用`type="module"`属性可以引入模块化的JavaScript文件。这种方式允许你使用ES6模块特性，例如`import`和`export`。下面是一个简单的示例，展示如何在HTML中引入一个模块：

  ```html
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>模块引入示例</title>
  </head>
  <body>
      <h1>欢迎使用模块化JavaScript</h1>
      <script type="module">
          import { greet } from './module.js';
          greet('你好，世界！');
      </script>
  </body>
  </html>
  ```

  在这个例子中，`module.js`是一个包含导出功能的模块文件。你可以这样定义`module.js`：

  ```javascript
  // module.js
  export function greet(message) {
      console.log(message);
  }
  ```

  使用`type="module"`的脚本会以异步方式加载，并且会在全局作用域中创建一个新的模块作用域，因此在模块中定义的变量不会污染全局作用域。
  -->
</head>

<body>

  <p>动态引入</p>
  <button id="btn1">按钮1</button>
  <button id="btn2">按钮2</button>

  <script type="module">
    import add from './js/add.js';
    console.log(add(1, 2));

    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    btn1.addEventListener('click', async () => {
      // import('./js/math.js').then((module) => {
      //   console.log(module.add(1, 2));
      // });
      const module = await import('./js/add.js');
      console.log(module);
    });

    btn2.addEventListener('click', async () => {
      const { add, sub } = await import('./js/math.js');
      console.log(add(1, 2));
      console.log(sub(1, 2));
    });
  </script>
</body>

</html>